<template>
	<view class="tactics-page" :class="{ 'not-login': !isLogin }">
		<!-- 顶部区域（包含navbar和banner） -->
		<view class="top-section">
			<!-- 顶部标题 -->
			<view class="header">
				<text class="page-title">策略广场</text>
			</view>

			<!-- 期货行情每日分析横幅 -->
			<view class="banner">
				<view class="banner-content">
				</view>
			</view>
		</view>

			<!-- 未登录空状态 -->
			<view v-if="!isLogin" class="empty-wrapper">
				<empty-login />
			</view>

			<!-- 策略列表 -->
			<view v-else class="strategy-list">
				<view v-for="(strategy, index) in strategyList" :key="index" class="strategy-card"
					@click="handleStrategyClick(strategy)">
					<view class="strategy-header">
						<view class="strategy-left">
							<view class="strategy-icon">
								<image src="/static/images/tactics/tactics.png" mode="aspectFit" />
							</view>
							<text class="strategy-name">{{ strategy.strategyName }}</text>
						</view>
						<!-- 推送设置按钮移到右侧 -->
						<view class="push-setting-btn-mini" @click.stop="handlePushSettingClick(strategy)">
							<uv-icon name="setting" color="#06CBB6" size="20"></uv-icon>
							<text class="setting-text-mini">推送设置</text>
						</view>
					</view>

					<view class="strategy-stats">
						<view class="stat-row">
							<view class="stat-item">
								<text class="stat-label">盈亏比：</text>
								<text class="stat-value">{{ strategy.profitRatio  || '39%'}}</text>
							</view>
							<view class="stat-item">
								<text class="stat-label">总订单：</text>
								<text class="stat-value">{{ strategy.totalOrders || 387632 }}</text>
							</view>
						</view>
						<view class="stat-row">
							<view class="stat-item">
								<text class="stat-label">胜率：</text>
								<text class="stat-value">{{ strategy.winRate || '70%' }}</text>
							</view>
							<view class="stat-item">
								<text class="stat-label">年化：</text>
								<text class="stat-value">{{ strategy.annualReturn  || '30%'}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	import {
		getStrategyType
	} from '@/api/tactics'
	import { getToken } from '@/utils/auth'
	import EmptyLogin from '@/components/empty-login/empty-login.vue'
	
	export default {
	components: {
		EmptyLogin
	},
	data() {
		return {
			statusBarHeight: 0,
			strategyList: [],
			isLoading: false // 防止重复调用
		}
	},
	
	computed: {
		// 是否已登录
		isLogin() {
			return !!getToken()
		}
	},

	onLoad() {
		// 获取系统信息
		const systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight

		uni.setNavigationBarTitle({
			title: 'AG五大顶级策略'
		})
		
		// 只有登录后才调用接口
		if (this.isLogin) {
			this.getTactics()
		}
	},
	
	onShow() {
		// 每次显示页面时检查登录状态，如果已登录且没有数据且不在加载中则加载
		if (this.isLogin && this.strategyList.length === 0 && !this.isLoading) {
			this.getTactics()
		}
	},

	methods: {
		async getTactics() {
				if (this.isLoading) return // 防止重复调用
				this.isLoading = true
				
				try {
					const res = await getStrategyType()
					console.log('策略数据:', res);

					// 检查返回数据
					if (res && res.data && res.data.length > 0 && res.data[0].strategies) {
						// 映射接口字段到页面使用的字段
						this.strategyList = res.data[0].strategies.map(strategy => ({
							id: strategy.id,
							strategyName: strategy.strategyName,
							description: strategy.description,
							// 映射字段并设置默认值
							profitRatio: strategy.defaultProfitLossRatio ?
								`${strategy.defaultProfitLossRatio}%` : '39%',
							totalOrders: strategy.defaultTotalOrder || 387632,
							winRate: strategy.defaultWinRate ? `${strategy.defaultWinRate}%` : '70%',
							annualReturn: strategy.defaultAnnualized ? `${strategy.defaultAnnualized}%` :
								'30%',
							showPushButton: true
						}))
					} else {
						// 没有数据时使用默认值
						console.warn('接口返回数据为空，使用默认策略列表')
						this.useDefaultStrategyList()
					}
				} catch (error) {
					console.error('获取策略数据失败:', error)
					// 接口失败时使用默认值
					this.useDefaultStrategyList()
				} finally {
					this.isLoading = false
				}
			},

			// 使用默认策略列表
			useDefaultStrategyList() {
				this.strategyList = [{
						id: 1,
						strategyName: '高低点策略',
						description: '基于价格高低点的交易策略',
						profitRatio: '39%',
						totalOrders: 387632,
						winRate: '70%',
						annualReturn: '30%',
						showPushButton: true
					},
					{
						id: 2,
						strategyName: '趋势策略',
						description: '跟随市场趋势的交易策略',
						profitRatio: '45%',
						totalOrders: 256789,
						winRate: '68%',
						annualReturn: '35%',
						showPushButton: true
					}
				]
			},
		// 策略卡片点击
		handleStrategyClick(strategy) {
			console.log('点击策略:', strategy)
			// 跳转到策略详情页
			uni.navigateTo({
				url: `/subPages/tactics/detail?id=${strategy.id}`
			})
		},

		// 推送设置按钮点击
		handlePushSettingClick(strategy) {
			console.log('点击推送设置:', strategy)
			// 跳转到推送设置页面，传递策略ID
			uni.navigateTo({
				url: `/subPages/push/setting?id=${strategy.id}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.tactics-page {
		min-height: 100vh;
		background: #fff;
		
		&.not-login {
			background: linear-gradient(180deg, #f0faf9 0%, #ffffff 100%);
		}
	}
	
	.empty-wrapper {
		padding: 0 32rpx;
	}

	/* 顶部区域背景 */
	.top-section {
		background: url('/static/images/progress/navbar-bg.png') no-repeat;
		background-size: 100% 100%;
		padding-bottom: 20px;
	}

	.header {
		padding: 20px 0;
		text-align: center;
		padding-top: var(--status-bar-height);
	}

	.page-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}

	/* 横幅样式 */
	.banner {
		margin: 0 16px 0;
		border-radius: 12px;
		background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
		overflow: hidden;
	}

	.banner-content {
		background: url('/static/images/home/banner.png') no-repeat;
		background-size: 100% 100%;
		height: 230rpx;
	}

	.banner-text {
		flex: 1;
	}

	.banner-title {
		display: block;
		font-size: 24px;
		font-weight: bold;
		color: #fff;
		margin-bottom: 4px;
	}

	.banner-subtitle {
		display: block;
		font-size: 24px;
		font-weight: bold;
		color: #fff;
	}

	.banner-gift {
		width: 80px;
		height: 80px;
		position: relative;
	}

	.gift-icon {
		width: 100%;
		height: 100%;
	}

	/* 策略列表样式 */
	.strategy-list {
		padding: 0 16px;
	}

	.strategy-card {
		background: #fff;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 16px;
	}

	.strategy-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16px;
	}

	.strategy-left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.strategy-icon {
		width: 24px;
		height: 24px;
		margin-right: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.strategy-name {
		flex: 1;
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.push-setting-btn-mini {
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 6px 12px;
		background: #E6F9F7;
		border-radius: 20px;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
			opacity: 0.8;
		}
	}

	.setting-text-mini {
		font-size: 24rpx;
		color: #06CBB6;
		font-weight: 500;
		white-space: nowrap;
	}

	/* 统计数据样式 */
	.strategy-stats {
		margin-bottom: 16px;
	}

	.stat-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8px;
	}

	.stat-item {
		display: flex;
		align-items: center;
	}

	.stat-label {
		font-size: 28rpx;
		color: #666;
	}

	.stat-value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}
</style>